<div id="vue_form" class="container" style="text-align: center;height:100px">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-9">
            <input id="vue_form_input" type="text" class="form-control input-lg" placeholder="输入内容">
        </div>
        <div class="col-md-1">
            <button id="vue_form_btn" @click="sou" type="submit" class="btn btn-default input-lg">搜索</button>
        </div>
    </div>
</div>
<div class="col-md-2"></div>
<div class="col-md-8">
    <div id="article_list" class="list-group">
        <ul>
            <li class="list-group-item active">
                <h4 class="list-group-item-heading">
                    mysql文章列表
                </h4>
            </li>
            <li class="list-group-item"  v-for="(item,index) in items">
                <h4 class="list-group-item-heading">
                    <a href="javascript:void(0)" @click="articleClick(item.doc_id)">{{item.title}}</a>
                </h4>
                <p class="list-group-item-text">
                    <b>作者：</b>{{item.author}}<b>&nbsp;&nbsp;&nbsp;发布时间：</b>{{item.intime}}
                </p>
                <span style="float: right;position: relative;margin-top: -30px;">
                    <button type="button" class="btn btn-default btn-sm" @click="btn_LinuxDocEdit(index)">
                        <span class="glyphicon glyphicon-edit"></span>编辑
                    </button>
                    <button class="btn btn-default btn-sm" @click="btn_linuxDocDel(item.doc_id)">
                        <span class="glyphicon glyphicon-remove-sign" ></span>删除
                    </button>
                </span>
            </li>
        </ul>
    </div>
    <div id="page_vue">
        <page v-bind:total="total" v-bind:pagesize="pagesize" onPageChange="loadPageData"></page>
    </div>
</div>
<div class="col-md-2"></div>
<script>
    var global_docType = 2;
    var isActiveQC = false;//是否激活查询条件
    //文章vue对象
    var article_vue;
    //页面分页控件vue对象
    var page_vue = new Vue({
        el:"#page_vue"
        ,data:{
            total:1000,//初始化默认值，执行查询后，该值会被替换
            pagesize:10
        }
    });
    var condition_vue = new Vue({
        el:"#vue_form"
        ,data:{

        }
        ,methods:{
            sou:function(){
                var val = $("#vue_form_input").val();
                var condition = {};
                condition["title"] = val;
                condition["doc_type"] = global_docType;
                sendQuery(condition);
                setConditionActive();
            }
        }
    });
    function loadAll(){
        $.post("/documents/docQuery",{"pagesize":page_vue.pagesize,"doc_type":global_docType},function(result){
            page_vue.total = result.total;
            article_vue = new Vue({
                el:"#article_list"
                ,data:{
                    items:result.data
                }
                ,methods:{
                    articleClick:function(val){
                        openWinPreview(val);
                    }
                    ,btn_LinuxDocEdit:function(val){
                        openWinEditLinux(val);
                    }
                    ,btn_linuxDocDel:function(val){
                        $.post("/documents/docDel",{"docId":val},function(result){
                            MsgAlert.info(result.msg,true);
                            sendQuery();
                        },"json");
                    }
                }
            });
        },'json');
    }

    function sendQuery(condition){
        condition = condition||{"pagesize":page_vue.pagesize,"doc_type":global_docType};
        if(isActiveQC){
            condition["title"] = $("#vue_form_input").val();
        }
        $.post("/documents/docQuery",condition,function(result){
            page_vue.total = result.total;
            article_vue.items = result.data;
        },'json');
    }

    function openWinPreview(val){
        var height = $(window).height();
        var width = $(window).width();
        width = width*0.5;
        var fulls = "left=0,screenX=0,top=0,screenY=0,scrollbars=1";    //定义弹出窗口的参数
        if (window.screen) {
            var ah = screen.availHeight - 30;
            var aw = screen.availWidth - 10;
            fulls += ",height=" + ah;
            fulls += ",innerHeight=" + ah;
            fulls += ",width=" + aw;
            fulls += ",innerWidth=" + aw;
            fulls += ",resizable"
        } else {
            fulls += ",resizable"; // 对于不支持screen属性的浏览器，可以手工进行最大化。 manually
        }
        var loadUrl = "/documents/getArticelByID";
        open(encodeURI("/common/previewHtml.jsp?docId="+val+"&loadUrl="+loadUrl),fulls);
    }

    function openWinEditLinux(index){
        var height = $(window).height();
        var width = $(window).width();
        width = width*0.5;
        var title = article_vue.items[index].title;
        var doc_id = article_vue.items[index].doc_id;
        var fulls = "left=0,screenX=0,top=0,screenY=0,scrollbars=1";    //定义弹出窗口的参数
        if (window.screen) {
            var ah = screen.availHeight - 30;
            var aw = screen.availWidth - 10;
            fulls += ",height=" + ah;
            fulls += ",innerHeight=" + ah;
            fulls += ",width=" + aw;
            fulls += ",innerWidth=" + aw;
            fulls += ",resizable"
        } else {
            fulls += ",resizable"; // 对于不支持screen属性的浏览器，可以手工进行最大化。 manually
        }
        open(encodeURI("/common/htmlEditor.jsp?title="+title+"&loadDataUrl=/documents/getArticelByID&targetUrl=/documents/docEdit&docId="+doc_id),fulls);
    }

    /**
     * 分页组件点击事件
     */
    function loadPageData(index){
        var curPage = index-1;
        var condition = {};
        condition["curPage"] = curPage;
        condition["pagesize"] = page_vue.pagesize;
        sendQuery(condition);
    }

    /**
     * 设置查询条件是否激活，分页按钮点击时是否携带查询条件
     **/
    function setConditionActive(){
        var keyword = $("#vue_form_input").val();
        if(keyword!=null&&keyword!=undefined&&keyword!=""){
            isActiveQC = true;
        }else{
            isActiveQC = false;
        }
    }

    //执行页面加载数据
    loadAll();
</script>
<script src="../../js/jquery-2.1.1.min.js"></script>
<script src="../../js/lai.page.js"></script>